<script setup lang="tsx">
import { useI18n } from '@/hooks/web/useI18n'
import { Search } from '@/components/Search'
import { reactive, ref, unref, defineComponent ,onMounted} from 'vue'
import { getDictOneApi } from '@/api/common'
import { FormSchema } from '@/components/Form'
import { useSearch } from '@/hooks/web/useSearch'
const { t } = useI18n()
const { searchRegister, searchMethods } = useSearch()
const { setSchema, setProps, setValues } = searchMethods
const props = defineProps({
    data: {
        type: Array,
        default: () => []
    }
})
console.log(props.data);

const isGrid = ref(false)

const changeGrid = (grid: boolean) => {
    setProps({
        isCol: grid
    })
    // isGrid.value = grid
}

const layout = ref('inline')

const changeLayout = () => {
    layout.value = unref(layout) === 'inline' ? 'bottom' : 'inline'
}

const buttonPosition = ref('left')

const changePosition = (position: string) => {
    layout.value = 'bottom'
    buttonPosition.value = position
}

const getDictOne = async () => {
    const res = await getDictOneApi()
    if (res) {
        setSchema([
            {
                field: 'field2',
                path: 'componentProps.options',
                value: res.data
            }
        ])
    }
}

const handleSearch = (data: any) => {//点击查询事件
    console.log(data)
}
const handleReset = (data: any) => {//点击重置按钮
    console.log(data);
}

const delRadio = () => {
    setSchema([
        {
            field: 'field3',
            path: 'remove',
            value: true
        }
    ])
}

const restoreRadio = () => {
    setSchema([
        {
            field: 'field3',
            path: 'remove',
            value: false
        }
    ])
}

const setValue = () => {
    console.log(1111);

    setValues({
        field1: 'Joy'
    })
}

const searchLoading = ref(false)
const changeSearchLoading = () => {
    searchLoading.value = true
    setTimeout(() => {
        searchLoading.value = false
    }, 2000)
}

const resetLoading = ref(false)
const changeResetLoading = () => {
    resetLoading.value = true
    setTimeout(() => {
        resetLoading.value = false
    }, 2000)
}
</script>

<template>
    <Search :schema="props.data" @register="searchRegister" />
</template>

<style lang="less" scoped>
.el-button {
    margin-top: 10px;
}
</style>
